//<feature charts>
Ext.define('AkData.view.CizgiGrafik', {
    extend: 'Ext.Panel',
    //requires: ['Ext.chart.Chart', 'Ext.chart.interactions.PanZoom', 'Ext.chart.series.Bar', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'Ext.carousel.Carousel'],
	requires: ['Ext.chart.Chart', 'Ext.chart.series.Line', 'Ext.chart.axis.Numeric', 'Ext.draw.modifier.Highlight', 'Ext.chart.axis.Time', 'Ext.chart.interactions.ItemHighlight'],
    config: {
        //cls: 'card1',
		//layout: 'fit',
		//fullscreen: true,

		layout: 'vbox',
		
        items: [
            {
                xtype: 'toolbar',
                //cls: 'charttoolbar',
                top: 0,
                right: 0,
                zIndex: 50,
                style: {
                    background: 'none'
                },
				items: [
                    {
                        iconCls: 'refresh',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function () {
							Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
							Ext.getStore('CizgiGrafik_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
                        }
                    },
				]
            },
			{
				flex: 1,
                xtype: 'chart',
                store: 'CizgiGrafik_Store',
                background: 'white',
				legend: {position: 'bottom'},
				
				innerPadding: {top: 40, left: 40, right: 40, bottom: 40},
				
				interactions: [{type: 'panzoom',zoomOnPanGesture: false},'itemhighlight'],
				
                series: [
                    {
                        type: 'line',
                        xField: 'hafta',
                        yField: 'hedef',
						title: 'Hedef',
						style: {stroke: 'rgb(17,95,166)', lineWidth: 4},
						
						marker: {type: 'circle', fill: 'yellow', radius: 10, fx: {duration: 200}},
						
						highlightCfg: {scale: 2},
						
                    },
					{
                        type: 'line',
                        xField: 'hafta',
                        yField: 'gercek',
						title: 'Gerçek',
						style: {stroke: 'rgb(148,174,10)', lineWidth: 4},
						marker: {type: 'circle', fill: 'yellow', radius: 10},
                    }
                ],
                axes: [
                    {
                        type: 'numeric',
                        position: 'left',
                        fields: ['hedef', 'gercek'],
						grid: true,
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        fields: 'hafta',
						grid: true,
                    }
                ]
            }
        ]
    },
	
    initialize: function () {
		this.callParent();
		
		var task = Ext.create('Ext.util.DelayedTask', function() {
			Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
			Ext.getStore('CizgiGrafik_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
		}, this);

		task.delay(500);
    }
	
});
//</feature>
